<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入react核心库 -->
    <script src="./node_modules/react/umd/react.development.js"></script>
    <!-- 引入react-dom 用于支持react操作dom -->
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="./node_modules/@babel/standalone/babel.js"></script>
    <div id="root"></div>
    <script type="text/babel">
      // 3创建React元素 创建虚拟dom-使用JSX语法
      let item = (
        <div className="item">
          <h2 className="title">中奖列表</h2>
          <ul className="list">
            <li> 1.小明 </li>
            <li> 2.小红 </li>
            <li> 3.小黄 </li>
            <li> 4.小兰 </li>
          </ul>
        </div>
      )
      // 4.创建根节点
      let root = ReactDOM.createRoot(document.getElementById('root'))
      // 5.把虚拟dom渲染到页面中
      root.render(item)
      console.log('vdom', item) //虚拟DOM
      console.log('tdom', document.getElementById('root')) //真实DOM
    </script>
  </head>
  <body></body>
</html>
